<template>
    <div>
        <!-- 顶部标题组件 -->
        <v-headline :value="text"></v-headline> 

        <!-- 头部搜索菜单 -->
        <VideoAnalyticsPartOne @showCityName="updateCity" :postData="post"></VideoAnalyticsPartOne>
        
        <!-- 排序 -->
        <div style="margin-bottom: 20px">
            <span>排序: </span>
            <template>                
                <el-button 
                size="mini"
                v-for="(item,index) in listData4" 
                :key="index" 
                :label="item.value" 
                @click="orderFn(`${item.prop}`,true)"
                >{{ item.value }}</el-button>
                <!-- orderFn(`${item.prop}`,true) -->
            </template> 
        </div>

        <!-- 表格 -->
        <div>
            <el-table
                :data="sortData"
                style="width: 100%">

                <template v-for="(item,index) in cities">

                    <el-table-column
                    v-if="item.type=='sort'"
                    :key="index"
                    prop="name"
                    label="UP主">
                    <!-- 函监听父组件函数，函数将父传子数据监听赋值 -->
                        <template slot-scope="scope"> 
                            <UPInformation :InformationId ="informationIndex(scope.row.Information.id)" ></UPInformation>
                        </template>
                    </el-table-column>

                    <el-table-column  v-else :prop="item.prop" :label="item.label" :key="item.prop" width="100"></el-table-column> 

                </template>

            </el-table>

            <!-- 分页 -->
            <el-pagination
                @size-change="handleSizeChange"
                @current-change="handleCurrentChange"
                :current-page.sync="currentPage"
                :page-size="pageSize"
                layout="total, prev, pager, next"
                :total="totalCount">
            </el-pagination>
        </div>
    </div>
</template>

<script>
import api from '../../api/index.js';
import headline from './headline.vue'; 
import VideoAnalyticsPartOne from '../../src/components/VideoAnalyticsPartOne'
import UPInformation from '../../src/components/UPInformation'
import Demo from "../../src/components/UPInformation/demo.vue"


export default {
    name: 'VideoAnalytics',
    components:{
        'v-headline':headline,
        VideoAnalyticsPartOne ,
        UPInformation,
        Demo
    },
    data(){
        return{
            inputValue:'',
            text:'商单视频分析',
            post:{},
            radio4:'发布时间',
            listData4:[
                {index:0,prop:'time', value:'发布时间'},
                {index:1,prop:'playback',value:'播放最多'},
                {index:2,prop:'like',value:'点赞最多'},
                {index:3,prop:'tipping',value:'投币最多'},
                {index:4,prop:'collection',value:'收藏最多'},
                {index:5,prop:'comments',value:'评论最多'},
                {index:6,prop:'barrage',value:'弹幕最多'},
            ],
            tableData: [],
            tableDataArr: [],
            showData:[],
            // 默认显示第几页
            currentPage:1,
            // 总条数
            totalCount:1,
            // 默认每页显示的条数
            pageSize:8,
            UPInformationData:{
                Information:{},  
            },
            classTimePosition: [
                {
                    campus:'new',
                    timePosition:[
                        {
                            time:'1',
                            weekD: '周三',
                            position:'bw221',
                        },
                        {
                            time:'2',
                            weekD: '周一',
                            position:'bx211',
                        }
                    ],
                },
                {
                    campus:'old',
                    timePosition:[
                        {
                            time:'3',
                            weekD: '周五',
                            position:'bs227',
                        }
                    ],
                }
            ],
            cities:[
                {
                    prop:'date',
                    label:'日期',
                    width:"100",
                    type:'sort'
                },
                // {
                //     prop:'name',
                //     label:'UP主',
                //     type:'sort',
                // },
                {
                    prop:'numberOfFollowers',
                    label:'粉丝数',
                    width:"100",
                },
                {
                    prop:'promotionForm',
                    label:'推广形式',
                    width:"100",
                },
                {
                    prop:'promotionBrand',
                    label:'推广品牌',
                    width:"100",
                },
                {
                    prop:'address',
                    label:'地址',
                    width:"100",
                },
                {
                    prop:'tag',
                    label:'标签',
                    width:"100",
                }
            ],
            // 排序2
            searchVal:'',    //默认输入为空
            letter:'',       //默认不排序 // 排序字段
            original:false,   //默认从小到大排列
            // 筛选
            formType:0
        }
    },
    methods:{
        // 拿父传子的数据
        getPostData(){
            api.xuData.getVideoPostData().then((res)=> {
                this.post =JSON.parse(JSON.stringify(res.data)) 
            })
        },
        // 拿表格数据
        getTableData(){
            api.xuData.getVideoTableData().then((res)=> {
                // 将数据赋值给tableData
                this.tableData = res.data
                // console.log('this.tableData:',this.tableData[0]);

                // 将数据的长度赋值给totalCount
                this.totalCount = res.data.length

                // 把table中的数据暂存到一个空数组中 
                this.tableDataArr = this.tableData

                // initUPInformationData
                this.UPInformationData.Information = this.deep(this.tableData[0].Information)

                // 如果table中的数据条数大于分页中设置的每页数据条
                if(this.pageSize < this.totalCount){
                    this.tableData = this.tableDataArr.slice(0,this.pageSize)
                }
            }).catch(error => {
                // loading.close()
                this.$message({
                    message: error.message,
                    type: 'error'
                })
            })
        },
        /*  ref 有三种用法:
        1、ref 加在普通的元素上，用this.$refs.（ref值） 获取到的是dom元素
        2、ref 加在子组件上，用this.$refs.（ref值） 获取到的是组件实例，可以使用组件的所有方法。在使用方法的时候直接this.$refs.（ref值）.方法（） 就可以使用了。
        3、如何利用 v-for 和 ref 获取一组数组或者dom 节点
        */
        // 重置日期筛选器
        resetDateFilter() {
            this.$refs.filterTable.clearFilter('date');
        },
        // 清空筛选器
        clearFilter() {
            this.$refs.filterTable.clearFilter();
        },
        // 根据选择地址显示
        formatter(row, column) {
            return row.address;
        },
        // 筛选标签
        filterTag(value, row) {
            return row.tag === value;
        },
        //
        filterHandler(value, row, column) {
            const property = column['property'];
            return row[property] === value;
        },

        // element 分页 
        // 每页显示的条数
        handleSizeChange(val) {
            // 改变每页显示的条数
            this.pageSize = val
            // 注意:在改变每页显示的条数时,要将页码显示到第一页
            this.currentPage = 1
            this.tableData = this.tableDataArr.slice(0,val)
            console.log(`每页 ${val} 条`);
        },
        // 显示第几页
        handleCurrentChange(val) {
            // 改变默认的页数
            // this.currentPage = val
            console.log(`当前页: ${val}`);
            const startData = (val - 1) * this.pageSize
            const endData = this.pageSize + (val - 1)* this.pageSize
            if (val === 1){ //点击第一页时
                this.tableData = this.tableDataArr.slice(0,this.pageSize)
            }else{
                this.tableData = this.tableDataArr.slice(startData,endData)
            }

        },
        sortChange(column){
            console.log('排序:',column.prop,column.order);
            this.currentPage = 1
            this.totalCount = this.tableData.length
            this.tableData = this.tableData.sort(this.sortFun(column.prop,column.order === 'ascending'));
            this.showData  = this.tableData.slice(0,this.pageSize)
        },
        sortFun( attr,rev ){
            // 第一个参数传入info里的prop表示排的是哪一列，第二个参数是升还是降排序
            if (rev == undefined ){
                rev = 1;
            } else {
                rev = ( rev ) ? 1 : -1;
            }
            return function (a,b){
                a = a[attr];
                b = b[attr];
                if ( a < b ){
                    return rev * -1;
                }
                if( a > b ){
                    return rev * 1;
                }
                return 0;
            }
        },
        // 排序
        orderFn ( letter,original  ){
            this.letter = letter; //排序字段
            this.original = original; //排序方式
        },
        informationIndex(res){
            var informationIndex = res
            return informationIndex
        },
        // 子传父 父组件的接收函数
        updateCity(data){
            this.formType = data.cityname;//改变了父组件的值
            console.log('toCity:'+this.formType);
        },
        // 子组件 listData2
        filterGoods(){
            if ( this.type == 0 ){
                //  this.goods = this.childPostData.listData
                // splice 向数组中添加新元素
                this.arrGoods.splice(0);
                this.arrGoods.push(...this.tableData)
            } else {
                let res = this.tableData.filter(item => {
                    return item.formBelong == this.type
                })
                this.arrGoods.splice(0);
                this.arrGoods.push(...res)
            }
        },
        // 深拷贝
        deep(obj) {
            if (!obj) return {}
            return JSON.parse(JSON.stringify(obj))
        }
    },
    // 计算属性
    computed:{
        // 通过计算属性过滤数据
        sortData :function(){
            var _this = this;
            // 筛选
            var arrGoods = [];
            // this.searchVal = 
            for (var i = 0; i < this.tableData.length; i++){
                // 如果匹配成功，向空数组添加数据
                if(this.tableData[i].name.search(this.searchVal) != -1){
                    arrGoods.push(this.tableData[i]);
                }
            }
            //筛选
            if ( this.formType == 0 ){
                //  this.goods = this.childPostData.listData
                // splice 向数组中添加新元素
                arrGoods.splice(0);
                arrGoods.push(...this.tableData)
            } else {
                let res = this.tableData.filter(item => {
                    return item.formBelong == this.formType
                })
                arrGoods.splice(0);
                arrGoods.push(...res)
            } 
            // 升序降序排列
            // false:升序 true：降序
            if ( this.letter != ''){
                arrGoods.sort(function(a,b){
                    if(_this.original){
                        return b.Information[_this.letter] - a.Information[_this.letter];
                    } else {
                        return a.Information[_this.letter] - b.Information[_this.letter];
                    }
                });
            }
            // _this.total = 0;
            // for (var i = 0;i < arrGoods.length;i++){
            //     _this.total += arrGoods[i].price;
            // }
            return arrGoods;
        },
        // 默认总价
        // total:function(){
        //     return this.total;
        // }
    },
    created(){
        this.getTableData()
        this.getPostData()

    },
    mounted(){
    }
};
</script>
<style scoped></style>